<template>
    <div class="category_form_container">
        <el-form ref="categoryForm" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="上级类目" prop="parent_sid">
                <custom-tree-select v-model="formData.parent_sid" :select-props="selectOption"
                                    :tree-props="treeOption" :options="treeData"
                                    expand-all :clearable="false" />
            </el-form-item>
            <el-form-item label="编号" prop="code">
                <el-input v-model="formData.code" placeholder="请输入编号" clearable />
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入名称" clearable />
            </el-form-item>
            <el-form-item label="图标">
                <upload-cropper :options="uploadCropperOptions" width="100px" height="100px" single
                                :data="uploadCropperData" @success="uploadSuccess">
                </upload-cropper>
            </el-form-item>
            <el-form-item label="备注" prop="note_info">
                <el-input type="textarea" v-model="formData.note_info" placeholder="请输入备注"
                          maxlength="200" show-word-limit clearable />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "CategoryForm",
    components: {
        UploadCropper: () => import("@common/components/upload/UploadCropper"),
        CustomTreeSelect: () => import("@common/components/custom/TreeSelect"),
    },
    props: {
        row: {
            type: Object,
            default: null,
        },
        treeData: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        const _this = this;
        return {
            initData: {},
            formData: {},
            rules: {
                parent_sid: [ { required: true, message: '请选择上级目录', trigger: 'blur' } ],
                code: [ { required: true, message: '请输入编号', trigger: 'blur' } ],
                name: [ { required: true, message: '请输入名称', trigger: 'blur' } ],
            },
            selectOption: {
                label: 'name',
                placeholder: '请选择上级类目',
            },
            treeOption: {
                nodeKey: 'sid',
                props: {
                    label: 'name',
                    children: 'children',
                },
                procData(data) {
                    let list = [ { sid: 'root', name: '根节点', children: data } ];
                    return _this.procTreeData(list);
                },
            },
            uploadCropperOptions: {
                dialogOptions: {
                    title: "图片裁剪",
                    visible: false,
                    width: "200px",
                    height: "100px",
                },
                cropperOptions: {
                    autoCropWidth: 200, // 默认生成截图框宽度
                    autoCropHeight: 200, // 默认生成截图框高度
                    canScale: true,//
                    canMoveBox: true,
                    fixed: false,
                    fixedBox: true,
                },
                uploadOptions: {
                    // tip: '请裁剪200*200的图片',
                    associate_biz_table: 'jxc_category',
                    associate_biz_field_tag: 'icon_file_sid',
                }
            },
            uploadCropperData: [],
        }
    },
    watch: {
        row: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            const _this = this;
            if (!_this.row) {
                return;
            }
            if (_this.$refs.categoryForm) {
                _this.$refs.categoryForm.clearValidate();
            }
            const initData = $.extend({}, _this.row);
            if (_this.$utils.isEmpty(initData.parent_sid)) {
                initData.parent_sid = 'root';
            }
            _this.formData = $.extend({}, initData);
            _this.initData = $.extend({}, initData);
            if (_this.$utils.isNotEmpty(_this.formData.icon_file_sid)) {
                _this.uploadCropperData = [ { file_sid: _this.formData.icon_file_sid } ];
            }
        },
        procTreeData(data) {
            const _this = this;
            let list = [];
            if (_this.$utils.isNotEmptyList(data)) {
                data.filter(item => item.sid !== '-1').forEach(item => {
                    let obj = $.extend({}, item);
                    if (item.sid === _this.initData.parent_sid && _this.initData.parent_sid !== '-1'
                        && _this.$utils.isNotEmpty(_this.formData.sid)) {
                        obj.children = [];
                    } else {
                        obj.children = _this.procTreeData(item.children);
                    }
                    list.push(obj);
                });
            }
            return list;
        },
        uploadSuccess(data) {
            const _this = this;
            let icon_file_sid = '';
            if (_this.$utils.isNotEmptyList(data)) {
                icon_file_sid = data[0].sid;
            }
            _this.formData = $.extend({}, _this.formData, {
                icon_file_sid,
            });
        },
        async confirm() {
            const _this = this;
            let valid = await _this.validateForm('categoryForm');
            if (!valid) {
                return false;
            }
            let subData = $.extend({}, _this.formData);
            return _this.fetchData(_this.$api.API_SaveJxcCategory, subData).then(() => {
                _this.$message.success('保存成功！');
                return true;
            }).catch(() => {
                return false;
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.category_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
